new Vue({
  el: '#main',
  data: {
    unfold: null,
    queryGroup: {
      className: '',
      specialtyYear: '',
      specialtyMajor: -1,
      learningState: -1,
      teacherName: -1,
      fuzzy: false,
    },
    specialtyMajorList: null,
    learningStateList: null,
    teacherNameList: null,
    list: null,
    pagination: null,
  },
  computed: {
    unfoldOrfold() {
      return this.unfold ? '收起' : '展开'
    },
  },
  methods: {
    getInitStatus() {
      this.unfold = this.$refs.collapse.classList.contains('show')
    },
    toggle() {
      this.unfold = !this.unfold
    },
    queryList() {
      // 预留下拉框的数据查询
      $.ajax({
        url: '/dropdownQuery',
        type: 'POST',
        data: JSON.stringify({ type: 'findAll' }),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: (data) => {
          console.log(data)
          if (data.status) {
            this.$set(this, 'specialtyMajorList', data.sml),
              this.$set(this, 'learningStateList', data.lsl),
              this.$set(this, 'teacherNameList', data.tnl),
              this.$nextTick(() => {
                $('.selectpicker').selectpicker('refresh')
              })
          }
          // this.alert(data.msg, data.status ? 'success' : 'danger', 1500)
        },
        error: (XMLHttpRequest, textStatus, errorThrown) => {
          this.alert('系统错误：' + errorThrown, 'danger', 1500)
        },
      })
    },
    query(targetPage) {
      // 预留查询方法
      let data = {
        type: 'query',
        queryGroup: this.queryGroup,
      }
      if (this.pagination && targetPage && typeof targetPage != "object") data.pageNum = targetPage
      $.ajax({
        url: '/specificationClassInfo',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: (data) => {
          // console.log(data)
          if (data.status) {
            // 获取分页信息
            this.$set(this, 'pagination', data.pagination)
            // 获取列表信息
            this.$set(this, 'list', data.pagination.list)
          }else {
            this.$set(this, 'pagination', null)
            this.$set(this, 'list', null)
          }
          this.alert(data.msg, data.status ? 'success' : 'danger', 1500)
        },
        error: (XMLHttpRequest, textStatus, errorThrown) => {
          this.alert('系统错误：' + errorThrown, 'danger', 1500)
        },
      })
    },
    exportInfo() {
      // 预留导出方法
      let data = {
        type: 'export',
      }
      $.ajax({
        url: '#!',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: (data) => {
          this.alert(data.msg, data.status ? 'success' : 'danger', 1500)
        },
        error: (XMLHttpRequest, textStatus, errorThrown) => {
          // console.log('状态码：', XMLHttpRequest.status)
          // console.log('状态：', XMLHttpRequest.readyState)
          // console.log('错误信息：', errorThrown)
          this.alert('系统错误：' + errorThrown, 'danger', 1500)
        },
      })
    },
    importInfo() {
      // 预留导入方法
    },
    add() {
      // 预留添加方法
    },
    alert(msg, type, delay) {
      // 三个参数依次为提示信息（string），提示类型（string），delay（滞留时间，ms为单位）
      $.notify(
        {
          message: msg,
        },
        {
          type: type,
          placement: {
            from: 'top',
            align: 'center',
          },
          z_index: 10800,
          delay: delay,
          animate: {
            enter: 'animate__animated animate__shakeX',
            exit: 'animate__animated animate__fadeOutDown',
          },
        }
      )
    },
  },
  created() {
    this.query()
    this.queryList()
  },
  mounted() {
    // bootstrap-datepicker组件 触发日期改变事件时获取值
    let that = this
    $('#specialtyYear').on('changeDate', function () {
      that.$set(that.queryGroup, 'specialtyYear', $(this).val())
    })
    this.getInitStatus()
  },
})

// bootstrap-datepicker组件 年份选择器 基础配置
$("[data-provide = 'datepicker']").datepicker({
  language: 'zh-CN', // 默认简体中文
  multidateSeparator: ', ', // 默认多个日期用,分隔
  autoclose: true, //选中之后自动隐藏日期选择框
  clearBtn: true, //清除按钮
  forceParse: true, // 是否强制分析输入值
  startDate: '-24y', // 初始日期
  endDate: '+0y', // 结束日期
  startView: 'decade', // 打开视图模式
  endView: 'decade', // 结束视图模式
  maxViewMode: 'decade', // 视图模式最小限制
  minViewMode: 'decade', // 视图模式最大限制
})
// bootstrap-selectpicker组件 下拉框 基础配置
$('.selectpicker').selectpicker({ noneSelectedText: '请选择...' })
